<template>
	<view class="wui-search" :style="[backgroundColorComputed]">
		<slot name="search-left"></slot>
		<view class="search">
			<text class="iconfont icon-uni-wui-search"></text>
			<input
				class="input"
				:disabled="disabled"
				:style="[inputAlignComputed]"
				type="text"
				:placeholder="placeholder"
				:value="value"
				@input="input"
			/>
			<text v-if="value && value.length" class="iconfont icon-wui-circular-close-full" @click="clear"></text>
		</view>
		<slot name="search-right"></slot>
	</view>
</template>

<script>
export default {
	name: 'w-search',
	props: {
		value: {
			type: String
		},
		inputAlign: {
			type: String,
			default: 'left'
		},
		disabled: {
			type: Boolean,
			default: false
		},
		backgroundColor: {
			type: String,
			default: '#fff'
		},
		placeholder:{
			type: String,
			default: '请输入搜索关键词'
		}
	},
	watch: {
		value(val) {
			this.$emit('input', val);
		}
	},
	computed: {
		inputAlignComputed() {
			return {
				'--input-align': this.inputAlign
			};
		},
		backgroundColorComputed() {
			return {
				'--background': this.backgroundColor
			};
		}
	},
	methods: {
		clear() {
			this.$emit('input', '');
			this.$nextTick(() => {
				this.$emit('clear');
			});
		},
		input(e){
			this.$emit('input', e.detail.value)
		}
	}
};
</script>

<style lang="scss" scoped>
.wui-search {
	height: 100rpx;
	background-color: var(--background);
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	.search {
		flex: 1;
		position: relative;
		background-color: #f7f8fa;
		height: 100%;
		display: flex;
		align-items: center;
		padding-left: 60rpx;
		padding-right: 60rpx;
		border-radius: 5rpx;
		overflow: hidden;
		.input {
			font-size: 26rpx;
			display: flex;
			align-items: center;
			text-align: var(--input-align);
			height: 100%;
			width: 100%;
		}
		.icon-uni-wui-search,
		.icon-wui-circular-close-full {
			position: absolute;
			top: 0;
			height: 100%;
			width: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
		.icon-uni-wui-search {
			left: 0;
		}
		.icon-wui-circular-close-full {
			right: 0;
			color: #c8c9cc;
		}
	}

	
}
</style>
